<div class="search content">
  <form nz-form [formGroup]="searchFrom" (ngSubmit)="searchResult()">
    <div nz-row nzGutter="48">
      <div nz-col nzSpan="5">
        <nz-form-item>
          <nz-form-label>工作名称</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="name" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="5">
        <nz-form-item>
          <nz-form-label>工作目标</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="target" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="5">
        <nz-form-item>
          <nz-form-label>属性标签</nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="tags" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="5">
        <nz-form-item>
          <nz-form-label>完成状态</nz-form-label>
          <nz-form-control>
            <nz-select formControlName="processStatus" nzAllowClear>
              <nz-option nzValue="1" nzLabel="已完成"></nz-option>
              <nz-option nzValue="0" nzLabel="未完成"></nz-option>
              <nz-option nzValue="2" nzLabel="进行中"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="4">
        <nz-form-item>
          <nz-form-label>等级</nz-form-label>
          <nz-form-control>
            <nz-select formControlName="importance" nzAllowClear>
              <nz-option nzValue="0" nzLabel="重要"></nz-option>
              <nz-option nzValue="1" nzLabel="很重要"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzGutter="48">
      <div nz-col nzSpan="5">
        <nz-form-item>
          <nz-form-label>开始时间</nz-form-label>
          <nz-form-control>
            <nz-range-picker formControlName="begin"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="5">
        <nz-form-item>
          <nz-form-label>结束时间</nz-form-label>
          <nz-form-control>
            <nz-range-picker formControlName="end"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="5" nzOffset="9">
        <button nz-button nzType="primary" style="width: 50%;margin-left: 28%;">查询</button>
        <button nz-button nzType="link" (click)="restSearchFrom($event)">重置</button>
      </div>
    </div>
  </form>
</div>
<div class="divider content">
  <span class="divider-text">工作列表</span>
  <span class="divider-button">
    <button nz-button nzType="link" (click)="addTask()">添加工作</button>
  </span>
</div>
<div class="date content">
  <nz-table #taskTable [nzData]="taskList" nzTableLayout="fixed" nzBordered nzSize="small" [nzLoading]="isTableLoding">
    <thead>
      <tr>
        <th nzAlign="center">名称</th>
        <th nzAlign="center" nzWidth="25%">描述</th>
        <th nzAlign="center" nzWidth="15%">目标</th>
        <th nzAlign="center" nzWidth="8%">开始时间</th>
        <th nzAlign="center" nzWidth="8%">结束时间</th>
        <th nzAlign="center" nzWidth="80px">等级</th>
        <th nzAlign="center" nzWidth="80px">状态</th>
        <th nzAlign="center" nzWidth="160px">操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of taskTable.data">
        <ng-container *ngFor="let item of mapOfExpandedData[data.key]">
          <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
            <td [nzIndentSize]="item.level! * 20" [nzShowExpand]="!!item.children" [(nzExpand)]="item.expand"
              (nzExpandChange)="collapse(mapOfExpandedData[data.key], item, $event)">
              {{ item.name }}
            </td>
            <td nzAlign="center">{{item.description}}</td>
            <td nzAlign="center">{{item.target}}</td>
            <td nzAlign="center">{{item.begin | date:'yyyy-MM-dd'}}</td>
            <td nzAlign="center">{{item.end | date:'yyyy-MM-dd'}}</td>
            <td nzAlign="center">{{item.importance | importance}}</td>
            <td nzAlign="center">{{item.processStatus | processStatus}}</td>
            <td nzAlign="center">
              <div nz-row nzJustify="space-between">
                <div nz-col nzSpan="11">
                  <button nz-button class="table-action-button" nz-popconfirm
                    nzPopconfirmTitle="完成该工作?(所有子工作将设置为完成)" nzPopconfirmPlacement="bottom"
                    (nzOnConfirm)="completeTask(item)" [disabled]="item.processStatus != 2">完成工作</button>
                </div>
                <div nz-col nzSpan="11">
                  <button nz-button class="table-action-button" (click)="handleBriefAdder(item)">添加简报</button>
                </div>
              </div>
              <div nz-row nzJustify="space-between" style="margin-top: 8px;">
                <div nz-row nzSpan="7">
                  <button nz-button class="table-action-button" nzType="primary" (click)="handleEditTask(item)">编辑</button>
                </div>
                <div nz-row nzSpan="7">
                  <button nz-button class="table-action-button" nzType="primary" nzDanger nz-popconfirm
                    nzPopconfirmTitle="删除该工作及子工作" nzPopconfirmPlacement="bottom"
                    (nzOnConfirm)="deleteTask(item.key)" >删除</button>
                </div>
                <div nz-row nzSpan="7">
                  <button nz-button class="table-action-button" (click)="navigateToDetail(item.key)">详情</button>
                </div>
              </div>
            </td>
          </tr>
        </ng-container>
      </ng-container>
    </tbody>
  </nz-table>
</div>

<nz-modal [(nzVisible)]="isTaskModalVisible" [nzTitle]="taskModalTitle" (nzOnCancel)="handleAdderCancel()"
  (nzOnOk)="handleAdderOk()" [nzClosable]="false" [nzMaskClosable]="false">
  <app-phase-task-adder #taskAdder [taskSelectNode]="taskSelectNode"></app-phase-task-adder>
</nz-modal>

<nz-modal [(nzVisible)]="isTaskBriefVisible" [nzTitle]="'添加简报'" (nzOnCancel)="handleBriefCancel()"
  (nzOnOk)="handleBriefOk()" [nzClosable]="false" [nzMaskClosable]="false">
  <app-brief-adder #briefAdder></app-brief-adder>
</nz-modal>
